<template>
  <div class="spgl-container">
    <div class="spgl-cntent">
      <el-tabs
        class="spgl-one-tab"
        v-model="activeNameOne"
        @tab-click="tabChangeOne"
      >
        <!-- 1. 水票统计 -->
        <el-tab-pane label="水票统计" name="statistics">
          <div style="margin: 20px">
            <el-row :gutter="20">
              <!-- 1.1 销售总计 -->
              <el-col :span="12"
                ><el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>销售总计</span>
                    <div style="float: right; padding: 3px 0" type="text">
                      <i class="el-icon-question" style="color: #409eff"></i>
                    </div>
                  </div>
                  <div class="text item">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div class="gray">总销售额</div>
                        <div class="font-24">999,999,999,999.00</div>
                      </el-col>
                      <el-col :span="12">
                        <div class="gray">总销售额</div>
                        <div class="font-24">999,999,999,999.00</div>
                      </el-col>
                      <el-col :span="12" :offset="12">
                        <el-divider class="margin-10"></el-divider>
                        <span class="gray">已使用 </span><span>122,222</span>
                        <span class="gray" style="margin-left: 20px"
                          >未使用 </span
                        ><span>2,323,232</span>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" class="margin-top-25">
                      <el-col :span="8">
                        <el-tabs
                          class="spgl-one-tab-no"
                          v-model="chartParams.activeNameTwo"
                          @tab-click="tabChangeTwo"
                        >
                          <el-tab-pane label="销售额" name="volume">
                          </el-tab-pane>
                          <el-tab-pane label="销量" name="num"> </el-tab-pane>
                        </el-tabs>
                      </el-col>
                      <el-col :span="16">
                        <el-form
                          :inline="true"
                          :model="chartParams"
                          class="demo-form-inline"
                        >
                          <el-form-item label="">
                            <!-- @change="getListForBill" -->
                            <el-date-picker
                              clearable
                              type="date"
                              v-model="chartParams.start_date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择日期"
                              style="width: 135px"
                            ></el-date-picker>
                            -
                            <!-- @change="getListForBill" -->
                            <el-date-picker
                              value-format="yyyy-MM-dd"
                              v-model="chartParams.end_date"
                              clearable
                              type="date"
                              placeholder="选择日期"
                              style="width: 135px"
                            ></el-date-picker>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div
                          id="mychart-sales-volume"
                          :style="{ width: '100%', height: '280px' }"
                        ></div>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>

              <!-- 1.2 销售类别占比 -->
              <el-col :span="12"
                ><el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>销售类别占比</span>
                    <div style="float: right; padding: 3px 0" type="text">
                      <i class="el-icon-question" style="color: #409eff"></i>
                    </div>
                  </div>
                  <div class="text item">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-tabs
                          class="spgl-one-tab-no"
                          v-model="chartParams.activeNameThree"
                          @tab-click="tabChangeThree"
                          type="card"
                        >
                          <el-tab-pane label="按年" name="year"> </el-tab-pane>
                          <el-tab-pane label="按月" name="month"> </el-tab-pane>
                          <el-tab-pane label="自定义" name="custom">
                          </el-tab-pane>
                        </el-tabs>
                      </el-col>
                      <el-col :span="12">
                        <el-form
                          :inline="true"
                          :model="chartParams"
                          class="demo-form-inline"
                        >
                          <el-form-item label="">
                            <!-- @change="getListForBill" -->
                            <el-date-picker
                              clearable
                              type="date"
                              v-model="chartParams.date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择日期"
                              style="width: 135px"
                            ></el-date-picker>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div
                          id="mychart-sales-category"
                          :style="{
                            width: '100%',
                            height: '400px',
                            marginTop: '20px',
                          }"
                        ></div>
                      </el-col>
                      <!-- <el-col :span="12">
                        <div>少时诵诗书 s</div>
                      </el-col> -->
                    </el-row>
                  </div>
                </el-card>
              </el-col>

              <!-- 1.3 水票销量统计 -->
              <el-col :span="24" class="margin-top-25"
                ><el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span> 水票销量统计</span>
                  </div>
                  <div class="text item">
                    <!-- <el-row :gutter="20">
                      <el-col :span="12">
                        <el-tabs
                          class="spgl-one-tab-no"
                          v-model="chartParams.activeNameTwo"
                          @tab-click="tabChangeOne"
                          type="card"
                        >
                          <el-tab-pane label="按年" name="year"> </el-tab-pane>
                          <el-tab-pane label="按月" name="month"> </el-tab-pane>
                          <el-tab-pane label="自定义" name="custom">
                          </el-tab-pane>
                        </el-tabs>
                      </el-col>
                      <el-col :span="12">
                        <el-form
                          :inline="true"
                          :model="formInDate"
                          class="demo-form-inline"
                        >
                          <el-form-item label="">
                            <el-input
                              v-model="formInDate.date1"
                              placeholder="审批人"
                            ></el-input>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row> -->
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <el-table
                          :data="Statistics.tableData"
                          style="margin: 0 0 30px 0; width: 100%"
                        >
                          <el-table-column
                            type="index"
                            label="排名"
                            align="center"
                            width="60"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="water_id"
                            label="水票编号"
                            align="center"
                            width="220"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="water_name"
                            label="水票名称"
                            align="center"
                            width="220"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="sale_num"
                            align="center"
                            label="销量 "
                            width="320"
                          >
                          </el-table-column>
                          <el-table-column align="center" label="状态 ">
                            <template slot-scope="scope">
                              {{
                                scope.row.shelf_status == 1 ? "上架" : "下架"
                              }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="操作 "
                            align="center"
                            width="220"
                          >
                            <template slot-scope="scope">
                              <div>
                                <el-button
                                  type="text"
                                  size="small"
                                  @click="ckmx(scope.row)"
                                  >查看明细</el-button
                                >
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="fenye">
                          <el-pagination
                            background
                            :total="Statistics.all_data_num"
                            @current-change="currentChange"
                            layout="pager, next, jumper"
                            next-text="下一页"
                            :page-count="waterParams.page_num"
                            :pager-count="5"
                          ></el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 2. 水票管理 -->
        <el-tab-pane label="水票管理" name="manage">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span> 水票管理</span>
            </div>
            <div class="text item">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-tabs
                    class="spgl-one-tab-no"
                    v-model="activeNameFour"
                    @tab-click="tabChangeFour"
                    type="card"
                  >
                    <el-tab-pane
                      :label="
                        '全部( ' +
                        (manageData.upperCount + manageData.downCount) +
                        ' )'
                      "
                      name="0"
                    >
                    </el-tab-pane>
                    <el-tab-pane
                      :label="'已上架( ' + manageData.upperCount + ' )'"
                      name="1"
                    >
                    </el-tab-pane>
                    <el-tab-pane
                      :label="'未上架( ' + manageData.downCount + ' )'"
                      name="2"
                    >
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
                <el-col :span="12">
                  <el-form
                    :inline="true"
                    :model="manageParams"
                    class="demo-form-inline"
                  >
                    <el-form-item label="">
                      <el-input
                        v-model="manageParams.keywords"
                        placeholder="输入水票ID或名称"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-button type="primary" disabled>搜索</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="24">
                  <el-button type="primary" @click="add">新建水票</el-button>
                  <el-button type="primary" disabled>批量上架</el-button>
                  <el-button type="primary" disabled>批量下架</el-button>
                  <el-button type="primary" disabled>批量删除</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-table
                    :data="manageData.tableData"
                    style="margin: 0 0 30px 0; width: 100%"
                  >
                    <el-table-column
                      width="120"
                      type="index"
                      label="排名"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      label="水票名称"
                      align="center"
                      width="320"
                    >
                      <template slot-scope="scope">
                        <p style="margin: 0 0 9px 0; color: #666666">
                          水票编号：
                          {{ scope.row.water_code }}
                        </p>
                        <div style="display: flex">
                          <img
                            style="width: 40px; height: 40px"
                            :src="configUrl + scope.row.water_img"
                            alt="water_img"
                          />
                          <p style="margin: 0 0 0 15px; width: 180px">
                            {{ scope.row.water_name }}
                          </p>
                          <p style="margin: 0 0 0 15px; width: 180px">
                            {{ scope.row.water_subtitle }}
                          </p>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="单价" align="center">
                      <template slot-scope="scope">
                        {{ "￥ " + "无单价字段" + scope.row.price }}
                        <!-- scope.row.price -->
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="sale_num"
                      align="center"
                      label="销量 "
                    >
                    </el-table-column>
                    <el-table-column align="center" label="状态 ">
                      <template slot-scope="scope">
                        {{ scope.row.shelf_status === "1" ? "上架" : "下架" }}
                      </template>
                    </el-table-column>
                    <el-table-column label="操作 " align="center" width="220">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            type="text"
                            size="small"
                            @click="spdetail(scope.row)"
                            >水票详情</el-button
                          >
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="fenye">
                    <el-pagination
                      background
                      :total="manageData.all_data_num"
                      @current-change="currentChange2"
                      layout="pager, next, jumper"
                      next-text="下一页"
                      :page-count="manageParams.page_num"
                      :pager-count="5"
                    ></el-pagination>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
      
<script>
import { getWaterStatisticsList, getWaterList } from "@/api/water"
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      activeNameOne: "statistics",
      chartParams: {
        activeNameTwo: "volume",
        activeNameThree: "year",
        start_date: "",
        end_date: "",
        date: ""
      },
      activeNameFour: "0",

      waterParams: {
        page_size: 10,
        page_num: 1,
        shelf_status: 0,
      },
      Statistics: {
        tableData: [],
        all_data_num: 0,
        upperCount: 0,
        downCount: 0,
      },

      manageParams: {
        page_size: 10,
        page_num: 1,
        shelf_status: 0,
        keywords: ""
      },
      manageData: {
        tableData: [],
        all_data_num: 0,
        upperCount: 0,
        downCount: 0,
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    tabChangeOne() {
      if (this.activeNameOne === "statistics") {
        this.getListForStatistics()
      } else {
        this.getListForManage()
      }
    },

    currentChange(val) {
      this.waterParams.page_num = val;
      this.getListForStatistics();
    },
    currentChange2(val) {
      this.manageParams.page_num = val;
      this.getListForManage();
    },

    getListForStatistics() {
      getWaterStatisticsList({
        token: this.token,
        ...this.waterParams
      }).then(res => {
        if (res.state) {
          const { downCount, upperCount, all_data_num, list, current_page_num, current_page_size } = res.data;
          this.waterParams.page_size = current_page_size;
          this.waterParams.page_num = current_page_num;
          this.Statistics.tableData = list;
          this.Statistics.upperCount = upperCount;
          this.Statistics.downCount = downCount;
          this.Statistics.all_data_num = all_data_num;
        }
      })
    },
    ckmx(row) {
      this.$router.push({
        path: "/tongzhuangshui/shuipiaomingxi", query: {
          water_id: row.water_id
        }
      })

    },

    // echarts 销售额趋势（/元）
    tabChangeTwo() {
      if (this.chartParams.activeNameTwo === "volume") {
        // ajax
        // this.$nextTick(()=>{
        //   this.drawLineForVolume()
        // })
      } else {
        // ajax
        // this.$nextTick(()=>{
        //   this.drawLineForVolume()
        // })
      }
    },
    drawLineForVolume() {
      // 基于准备好的dom，初始化echarts实例
      let Chart = this.$echarts.init(document.getElementById("mychart-sales-volume"));
      // 绘制图表
      Chart.setOption({
        title: { text: "销售额趋势（/元）" },
        tooltip: {},
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    // echarts 销售类别占比
    tabChangeThree() {
      if (this.chartParams.activeNameTwo === "year") {
        // ajax
        // this.$nextTick(()=>{
        //   this.drawLineForCategory()
        // })
      } else if (this.chartParams.activeNameTwo === "month") {
        // ajax
        // this.$nextTick(()=>{
        //   this.drawLineForCategory()
        // })
      } else {//custom

      }
    },
    drawLineForCategory() {
      // 基于准备好的dom，初始化echarts实例
      let Chart2 = this.$echarts.init(document.getElementById("mychart-sales-category"));
      // 绘制图表
      Chart2.setOption({
        title: {
          text: '图标标题',
          // subtext: '纯属虚构',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        labelLine: {
          show: false
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          // data: data.legendData,
          data: [
            "水票名称1",
            "水票名称2",
            "水票名称3",
            "水票名称4",
          ],
          // selected: data.selected
          selected: {}
        },
        series: [
          {
            name: '类别',
            type: 'pie',
            // radius: '55%',
            center: ['40%', '50%'],
            radius: ['50%', '70%'],
            // data: data.seriesData,
            data: [
              {
                name: "水票名称1",
                value: 58980
              },
              {
                name: "水票名称2",
                value: 58980
              },
              {
                name: "水票名称3",
                value: 58980
              },
              {
                name: "水票名称4",
                value: 58980
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },

    // 管理
    tabChangeFour() {
      if (this.chartParams.activeNameTwo === "0") {
        // ajax
        this.manageParams.shelf_status = 0;
      } else if (this.chartParams.activeNameTwo === "1") {
        // ajax
        this.manageParams.shelf_status = 1;
      } else {//2
        this.manageParams.shelf_status = 2;
      }
      this.getListForManage()
    },
    getListForManage() {
      getWaterList({
        token: this.token,
        ...this.manageParams
      }).then(res => {
        if (res.state) {
          const { downCount, upperCount, all_data_num, list, current_page_num, current_page_size } = res.data;
          this.manageParams.page_size = current_page_size;
          this.manageParams.page_num = current_page_num;
          this.manageData.tableData = list;
          this.manageData.upperCount = upperCount;
          this.manageData.downCount = downCount;
          this.manageData.all_data_num = all_data_num;
        }
      })
    },
    spdetail(row) {
      this.$router.push({
        path: "/tongzhuangshui/shuipiaodetail", query: {
          water_id: row.water_id
        }
      })
    },

    add() {
      this.$router.push({ path: "/tongzhuangshui/addshuipiao" })
    },
  },
  mounted() {
    this.getListForStatistics()

    // 修改tab和时间后,重新根据新数据init
    this.drawLineForVolume();
    this.drawLineForCategory();
  }
}
</script>
      
<style lang="scss" scoped>
.spgl-one-tab /deep/ .el-tabs__header {
  padding: 0 30px;
  margin-bottom: 0;
}
.spgl-one-tab /deep/ .el-tabs__content {
  background-color: #e9ebf2;
}
.spgl-one-tab-no /deep/ .el-tabs__header {
  padding: 0px;
}
.spgl-one-tab-no /deep/ .el-tabs__content {
  background-color: #fff;
}

.spgl-container {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  .gray {
    color: #aaa;
  }
  .font-24 {
    font-size: 24px;
    margin-top: 15px;
  }
  .margin-10 {
    margin: 15px 0;
  }
  .margin-top-25 {
    margin-top: 25px;
  }
}
</style>